<template>
  <div class="dashContent">
    <div class="header">
      <div class="title">
        <div class="line" />
        <div class="text name">我的待办</div>
        <!-- <div class="text">查看详情&nbsp;></div> -->
      </div>
    </div>
    <div class="content">
      <div class="div">
        <div class="conbg">
          <div class="title">待办任务数</div>
          <div class="name">{{ teamDetail.needDoTotal }}</div>
        </div>
        <div class="conbg">
          <div class="title">个人待办平均处理时长</div>
          <div class="name">{{ teamDetail.processingTime }}</div>
        </div>
      </div>
      <div class="div">
        <div class="conbg">
          <div class="title">已超时待办任务数</div>
          <div class="name">{{ teamDetail.needOverTimeNumber }}</div>
        </div>
        <div class="conbg">
          <div class="title">即将到期待办任务数</div>
          <div class="name">{{ teamDetail.needAboutTimeNumber }}</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="title">
        <div class="text">待办列表</div>
        <router-link to="myWork">
          <div class="text name">查看详情&nbsp;></div>
        </router-link>
      </div>
    </div>
    <div class="list">
      <div class="content">
        <div class="title">
          <div class="text">编号</div>
          <div class="operate">操作</div>
        </div>
      </div>
      <div class="getlist">
        <div class="info">
          <div class="text">
            <div v-if="tableData.length>0" class="div">
              <div v-for="item in tableData" :key="item.id" class="data">
                <div class="spancolor" />
                <span class="mag">{{ item.number||'--' }}</span>
                <span class="detail">
                  <router-link :to="{ name: 'EdgePatrol', query: {id: item.id }}">详情</router-link>
                </span>
              </div>
            </div>
            <div v-else class="div">
              <div class="data" style="text-align: center;">
                <span>暂无数据</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { Message } from 'element-ui'
import { needDoList, needDoHome } from '@/api/patrolExamine'

export default {
  name: 'Mycommission',
  data() {
    return {
      teamDetail: {},
      tableData: [],
      listQuery: {
        keyword: null,
        type: null,
        status: null,
        pageNum: 1,
        pageSize: 10
      }

    }
  },
  computed: {

  },
  mounted() {
    this.getList()
    this.getneedDoHome()
  },
  methods: {
    // 获取数据
    async getList() {
      const res = await needDoList(this.listQuery)
      this.listLoading = false
      if (res.code === 200) {
        this.tableData = res.data.list
        this.total = res.data.total || 0
        this.pages = res.data.pages || 0
      } else {
        Message({
          message: res.data.msg || 'error',
          type: 'error',
          showClose: true,
          duration: 2 * 1000
        })
      }
    },
    async getneedDoHome() {
      const res = await needDoHome()
      if (res.code === 200) {
        this.teamDetail = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashContent {
  .header{
    .title{
      display: flex;
      padding: 8px 0 0 6px;
      .line{
        width:4px;
        height:16px;
        background:#ffffff;
        margin-right: 8px;
    }
    .text{
      flex: 1;
      font-size:14px;
      font-weight:500;
      color:#ffffff;
      cursor: pointer;
    }
    .name{
      flex-grow: 4;
    }
    }
  }
  .content{
    margin: 15px 0 0 18px;
    .div{
        display: flex;
        margin-bottom: 12px;
        .conbg{
        width:50%;
        height:70px;
        background:rgba(37, 38, 47, 1);
        // background:linear-gradient(90deg,rgba(78,203,217,0.2) 0%,rgba(189,75,249,0.1) 100%);
        margin: 0 22px 0 0;
        .title{
          font-size:14px;
          font-weight:500;
         color:rgba(247,181,0,1);
          text-align: center;
          padding: 12px 0;
        }
        .name{
          font-size:18px;
          font-weight:400;
          color:rgba(255,255,255,1);
          text-align: center;
        }
      }
    }
  }
  .footer{
    display: flex;
    padding: 4px 0 10px 0;
    .title{
      width: 100%;
      .text{
        float: left;
        font-size:14px;
        font-weight:500;
        color:#ffffff;
        margin-left: 17px;
    }
    .name{
      width: 75%;
    }
    }
  }
 .list{
    .content{
      background:#25262f;
      opacity:0.8;
      height:32px;
      margin-right: 22px;
      .title{
        display: flex;
        line-height: 29px;
        font-size:12px;
        font-weight:500;
        color:rgba(247,181,0,1);
        position: relative;
        .text{
          margin-left: 8px;
          margin-right: 235px;
        }
        .operate{
          position: absolute;
          right: 34px;
        }
      }
    }
  }
   .getlist{
    // min-height: 290px;
    .info{
      margin: 10px 0 0 16px;
      .text{
        font-size:12px;
        font-weight:400;
        color:rgba(255,255,255,1);
        .div{
          padding: 3px 0;
          .data{
            padding: 8px 0;
            position: relative;
             .mag{
              margin-right: 166px
            }
            .detail{
              position: absolute;
              right: 57px;
              cursor: pointer;
            }
          }
          .data:nth-child(odd){
            background-color: transparent !important;
          }
          .data:nth-child(even) {
            background: rgba(37,38,47, 0.3);
          }
        }
      }

    }
  }
}
.spancolor{
  width: 5px;
    height: 5px;
    background: #44d7b6;
    border: 5px solid rgba(68,215,182,.35);
    display: inline-block;
    border-radius: 50px;
    margin-right: 5px;
    -webkit-box-shadow: 0 0 3px 3px rgba(25,90,121,.9);
    box-shadow: 0 0 3px 3px rgba(25,90,121,.9);
    margin-left: 12px;
}
</style>
